@import "~assets/styles/_bootstrap";

.user_header{
  width: 100%;
  min-height: 100px;
  background: url(~assets/images/user_header_bg.jpg) no-repeat center;
  background-size: cover;

  > div {
  	&:first-child {
  		padding: rem(30px) rem(8px) rem(9px);
  	}

  	> a {
			display: inline-block;
			width: rem(93px);
			min-height: 20px;
			text-align: center;

			> img {
				display: inline;
				width: rem(70px);
				height: rem(70px);
				vertical-align: middle;
				border-radius: 50%;
				border: 2px solid rgba(255,255,255,.4);
			}

			> span {
				font-size: 12px;
				color: #ccc;
			}
  	}

	  > .user_info_box {
	  	display: inline-block;
	  	width: rem(180px);
	  	vertical-align: top;

	  	.sp-icon_normal {
	  		margin-bottom: rem(5px);
	  		width: rem(34px);
	  		height: rem(34px);
	  		background: url('~assets/images/icon_normal.png') no-repeat;
	  		background-size: 100%;

	  		&.on {
		  		background: url('~assets/images/icon_vip.png') no-repeat;
		  		background-size: 100%;
	  		}
	  	}

	  	> p {
		    font-size: rem(14px);
		    color: #ccc;
		    line-height: rem(24px);
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;

		    &:first-child {
			    display: inline-block;
    	    max-width: rem(144px);
			    text-align: center;
			    color: #c7c027;
			    line-height: rem(28px);
			    font-size: rem(15px);
			    padding: 0 rem(12px);
			    margin-bottom: rem(6px);
			    background-color: rgba(0,0,0,.2);
			    border: 2px solid rgba(255,255,255,.4);
			    border-radius: rem(30px);
		    }

		    &.tips {
			    position: absolute;
			    top: rem(-28px);
			    right: 40%;
		    	padding: 0 rem(5px);
			    width: auto;
			    font-size: rem(12px);
			    color: #666;
			    overflow: inherit;
			    border-radius: rem(3px);
			    background: rgba(255, 255, 255, .7);
			    animation: myfirst 2s infinite;
			    animation-direction: alternate;


			    &:after {
				    position: absolute;
				    content: '';
				    width: 0;
				    height: 0;
				    bottom: rem(-5px);
				    right: rem(10px);
				    border-top: rem(5px) solid rgba(255,255,255,.7);
				    border-left: rem(5px) solid transparent;
				    border-right: rem(5px) solid transparent;
			    }

			    > a {
				    padding-left: rem(5px);
				    color: #0b466f;
			    	border-left: 1px solid #666;
			    }
		    }

		    .user_superior {
		    	color: #42d1f5;
		    }

		    .user_day {
		    	margin: 0 rem(5px);
		    }
	  	}
	  }

	  &.header_btn_box {
	  	position: absolute;
	    top: rem(12px);
	    right: rem(18px);
	    width: rem(72px);
	    height: rem(36px);
	    white-space: nowrap;

	    > a {
		    position: relative;
  	    display: inline-block;
		    width: 40%;
		    height: 100%;
		    vertical-align: middle;
		    margin: 0 5%;

		    > i {
		    	display: block;
			    width: 100%;
			    height: 100%;
			    padding: 0;
			    background-position: center;
			    background-size: 80% auto;
			    background-repeat: no-repeat;

			    &.user_msg {
			    	background-image: url(~assets/images/header_news2.png);
			    }

			    &.user_setting {
			    	background-image: url(~assets/images/icon/icon_setting_white.png);
			    }
		    }

		    > span {
		    	position: absolute;
		    	right: 0;
		    	top: rem(5px);
		    	width: rem(10px);
		    	height: rem(10px);
		    	border-radius: 50%;
		    	background-color: #ec5151;
		    }
	    }
	  }
  }

	.tips {
		width: 100%;
		height: rem(25px);
	  background: #fff9cd;
	  overflow: hidden;

	  .icon {
	  	position: absolute;
	  	top: 0;
	  	right: rem(10px);
	  	cursor: pointer;
	  	z-index: 1000;

	  	&:before {
	  		font-size: rem(16px);
	  		vertical-align: -webkit-baseline-middle;
	  	}
	  }

		.list {
			height: 100%;

	    .item {
	    	display: block;
	    	margin: 0 auto;
	    	width: rem(255px);
	    	height: rem(25px);
	    	line-height: rem(25px);
	    	font-size: rem(14px);
	    	text-align: center;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
	    }
		}
	}

}


@keyframes myfirst
{
    0% { opacity: 1 }
    100% { opacity: 0 }
}